<html>
<head>
  <title>Sample Slideshow</title>
  <script type="text/javascript" src="..\..\src\AnimeJ.js"></script>
  <script type="text/javascript" src="SlideShow.js"></script>
<script>
var s1 = null, s2 = null;

function button(label, visible, click) {
  var b = document.createElement('span');

  b.innerHTML = label;
  b.style.color = "Blue";
  b.style.cursor = "pointer";
  b.style.display = visible ? "inline" : "none";
  b.style.marginLeft = "3px";
  b.style.marginRight = "3px";
  b.onclick = click;
  return b;
}

function controltoolbar(d, s) {
  var play = button("Play", true, function () {
    s.Play();
    play.style.display = 'none';
    pause.style.display = 'inline';
    stop.style.display = 'inline';
  });
  var pause = button("Pause", false, function () {
    s.Pause();
    pause.style.display = 'none';
    resume.style.display = 'inline';
  });
  var resume = button("Resume", false, function () {
    s.Resume();
    resume.style.display = 'none';
    pause.style.display = 'inline';
  });
  var stop = button("Stop", false, function () {
    s.Stop();
    stop.style.display = 'none';
    pause.style.display = 'none';
    resume.style.display = 'none';
    play.style.display = 'inline';
  });
  d.appendChild(play);
  d.appendChild(pause);
  d.appendChild(resume);
  d.appendChild(stop);
  
  var display = document.createElement('span');
  display.innerHTML = "Display: " + s.GetDisplayTime() + 'ms';
  display.style.marginLeft = "3px";
  display.style.marginRight = "3px";
  d.appendChild(display);
  
  var incdisplay = button('+', true, function () {
    s.SetDisplayTime(s.GetDisplayTime() + 100);
    display.innerHTML = "Display: " + s.GetDisplayTime() + 'ms';
  });
  d.appendChild(incdisplay);

  var decdisplay = button('-', true, function () {
    if (s.GetDisplayTime() > 200) {
      s.SetDisplayTime(s.GetDisplayTime() - 100);
      display.innerHTML = "Display: " + s.GetDisplayTime() + 'ms';
    }
  });
  d.appendChild(decdisplay);

  var transition = document.createElement('span');
  transition.style.marginLeft = "3px";
  transition.style.marginRight = "3px";
  transition.innerHTML = "Transition: " + s.GetTransitionTime() + 'ms';
  d.appendChild(transition);

  var inctransition = button('+', true, function () {
    s.SetTransitionTime(s.GetTransitionTime() + 100);
    transition.innerHTML = "Transition: " + s.GetTransitionTime() + 'ms';
  });
  d.appendChild(inctransition);

  var dectransition = button('-', true, function () {
    if (s.GetTransitionTime() > 200) {
      s.SetTransitionTime(s.GetTransitionTime() - 100);
      transition.innerHTML = "Transition: " + s.GetTransitionTime() + 'ms';
    }
  });
  d.appendChild(dectransition);
}

function init() {
 var imgs1 = new Array(), imgs2 = new Array(), i;
 for (i = 1; i < 15; i++) imgs1.push('img\\' + i + '.jpg');
 for (i = 15; i < 30; i++) imgs2.push('img\\' + i + '.jpg');

 s1 = Sld_MakeShow('sld1', imgs1, 0, 200);
 s2 = Sld_MakeShow('sld2', imgs2, 0, 200);
 
 controltoolbar(document.getElementById('tb1'), s1);
 controltoolbar(document.getElementById('tb2'), s2);
}

</script>
</head>
<body onload="init()">
  <div style="position: absolute; top: 0px; text-align: center; width: 100%;" id="tb1"></div>
  <div style="position: absolute; top: 20px; width: 100%;" id ="sld1"></div>
  <div style="position: absolute; top: 220px; text-align: center; width: 100%;" id="tb2"></div>
  <div style="position: absolute; top: 250px; width: 100%;" id="sld2"></div>
</body>
</html>
